<template>
  <div>
    {{ msg }}
    <button @click="fn">按钮</button>
    <HelloWorld title="父组件传递的数据" a="10" b="20"/>
  </div>
</template>

<script>
import HelloWorld from '@c/HelloWorld.vue'
export default {
  /* 
    setup 组合式api 入口， 取代了（beforeCreate个created钩子） 所有代码业务代码要写在setup中
    返回值：  
      向 template 暴露 变量和方法，这里面的变量方法 模板可以直接使用
  */
  setup () {
    let msg = '你好世界';
    const fn = () => {
      msg = '值改变了'
    }
    
    return {
      msg,
      fn
    }
  },
  // 注册子组件
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss" scoped>

</style>